<template>
    <DescribePanel :info="info" :editorwidth="800" :editorheight="200" :attributes="attributes" :events="events">
        <SliderInput v-model:range="range" :step="1" :min="0" :max="120"></SliderInput>
    </DescribePanel>
</template>
<script>
import DescribePanel from './DescribePanel'
import SliderInput from '../common/SliderInput'
export default {
	components: {
		SliderInput,
		DescribePanel
	},
	data() {
		return {
			range: 50,
			info: {
				title: 'Slider 滑块(基于input type="range")',
				des: '通过拖动滑块在一个固定区间内进行选择。',
				editor: `\n<SliderInput v-model:range='range' :step='1' :min='0' :max='120'></SliderInput>\n\n<script>\n  data() {\n     return {\n    range:50,\n  }\n}\n<script>`
			},
			attributes: [
				{
					param: 'v-model:range',
					des: '绑定值',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '0'
				},
				{
					param: 'min',
					des: '最小值',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '0'
				},
				{
					param: 'max',
					des: '最大值',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '100'
				},
				{
					param: 'step',
					des: '步长',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '5'
				},
				{
					param: 'disabled',
					des: '是否禁用',
					type: 'boolean',
					selectvalue: '——',
					defaultvalue: 'false'
				}
			],
			events: []
		}
	}
}
</script>
<style scoped>
</style>


